<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>组件：局部组件，注册一个简单的局部组件runoob并使用它。这样组件只能在这个实例中使用</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
  <div id="app02">
    <runoob></runoob>
  </div>
  <div id="app03">
    <runoob></runoob>
  </div>

  <script>
     var Child = {
       template:'<h1> 自定义组件</h1>'
     }
      // 创建根实例
      new Vue({
        el:'#app02',
        components:{
          // 注册局部组件，这个<runoob>将只在父模版可用
          'runoob':Child
        }
      })
     // runoob组件注册在app02实例中，所以该实例不能使用runoob
     new Vue({
       el:'#app03',
     })
  </script>
</body>
</html>
